<template>
  <div class="releaseShop nav">
    <van-nav-bar title="发布商品" left-arrow @click-left="$router.history.go(-1)">
      <span slot="right" class="releaseBtn" @click='releaseBtn'>发布</span>
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">名称</div>
      <input type="text" v-model="info.title" placeholder="物品名称品牌型号标题" />
    </div>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">分类</div>
      <input type="text" v-model="info.categoryIdName" placeholder="请选择分类" readonly="readonly" @click='showType=true'/>
    </div>
    <div class="flex ml-30 mr-30 forms mt-40">
      <div class="name">新旧</div>
      <input type="text" v-model="info.quality" placeholder="选择新旧程度" readonly="readonly" @click='xjType=true'/>
    </div>
    <div class="flex ml-30 mr-30 forms mt-40 price">
      <div class="name">价格</div>
      <input type="text"  v-model="info.price" placeholder="输入宝贝价格，如198" />
      <van-checkbox v-model="checked">可议价</van-checkbox>
    </div>
    <div class="flex ml-30 mr-30 forms mt-40 mb-40">
      <div class="name">联系</div>
      <input type="text" v-model="info.contact" placeholder="买家联系我的方式" />
    </div>
    <div class="b_line ml-30 mr-30"></div>
    <div class="reason">
      <textarea v-model="info.content" placeholder="描述详情出手原因使用情况"></textarea>
    </div>
    <!-- <div class="pic ml-30">
      <div class="addPic">
        <img src="../../../public/images/addPic.png" />
      </div>
    </div> -->
    <div class="pic ml-30 addPic flex flex-wrap">
      <img v-for="(item,index) in info.image" :key="index" :src="item" />
      <td-upload @upload-img="headPortrait"></td-upload>
    </div>

    <van-actionsheet
      v-model="showType"
      :actions="typeActions"
      cancel-text="取消"
      @select="typeSelect"
      @cancel="showType=false"
    />

    <van-actionsheet
      v-model="xjType"
      :actions="xjActions"
      cancel-text="取消"
      @select="xjSelect"
      @cancel="xjType=false"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked:false,
      info: {
        image:[]
      },
      typeActions:[],
      xjActions:[
        {name:'全新'},
        {name:'9成新'},
        {name:'8成新'},
        {name:'7成新'},
        {name:'6成新'},
        {name:'5成新'},
        {name:'4成新'},
        {name:'3成新'},
        {name:'2成新'},
        {name:'1成新'},
      ],
      showType:false,
      xjType:false,
    };
  },
  created(){
    this.getMessage();
  },
  methods: {
    headPortrait(e) {
      this.info.image.push(e);
    },
    getMessage(){
      this.$get(this.$api.market.category,{size:10,page:1}).then(data=>{
        this.typeActions=data.data.curPageData;
      })
    },
    typeSelect(item){
      console.log(item);
      this.info.categoryId=item.categoryId;
      this.info.categoryIdName=item.name;
      this.showType=false;
    },
    xjSelect(item){
      console.log(item);
      this.info.quality=item.name;
      this.xjType=false;
    },
    releaseBtn(){
      console.log(this.info)
      if (!this.info.title) {
        this.$toast.fail("请输入商品名称");
        return;
      }
      if (!this.info.categoryIdName) {
        this.$toast.fail("请输入商品分类");
        return;
      }
      if (!this.info.quality) {
        this.$toast.fail("请输入新旧程度");
        return;
      }
      if (!this.info.price) {
        this.$toast.fail("请输入商品价格");
        return;
      }
      if (!this.info.contact) {
        this.$toast.fail("请输入联系方式");
        return;
      }
      if (!this.info.content) {
        this.$toast.fail("请输入商品信息");
        return; 
      }
      if (this.info.image.length==0) {
        this.$toast.fail("请上传商品图片");
        return;
      }
      this.info.images=JSON.stringify(this.info.image);
      // this.info.content=JSON.stringify({content:this.info.content});
      this.checked==false?  this.info.canBargain=0 : this.info.canBargain=1;
      this.$post(this.$api.market.productsPublish,this.info).then(data => {
        this.$toast.success({message:"发布成功",duration:500});
        this.$router.push({ path: "/shop"});
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forms .name {
  width: 1rem;
  height: 0.6rem;
  border-radius: 0.29rem;
  font: 0.28rem/0.6rem "微软雅黑";
  text-align: center;
  background-color: #f5f5f5;
  margin-right: 0.3rem;
}
.forms input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  color: #cccccc;
  font: 0.3rem/0.6rem "微软雅黑";
}
textarea {
  font: 0.3rem/0.4rem "微软雅黑";
  color: #cccccc;
  border: none;
  outline: none;
  width: 100%;
  height: 2rem;
  margin-left: 0.2rem;
}
.reason {
  position: relative;
  padding: 0.3rem;
}
.reason:before {
  content: "";
  width: 0.04rem;
  height: 0.4rem;
  background-color: #4aace9;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}
.addPic {
  /* height: 1.8rem; */
}
.addPic img {
  width: calc((100vw - 0.6rem - 0.2rem)/3);
  height: calc((100vw - 0.6rem - 0.2rem)/3);
  display: inline-block;
  /* margin-right: 0.2rem; */
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.addPic img:nth-of-type(3n){
  margin-right: 0;
}
</style>
